<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>下注金额实时统计</title>

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">
    <link href="${contextPath}/iconfont/iconfont.css" rel="stylesheet">
</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    <%@include file="nav.jsp"%>

    <div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">下注金额实时统计</h3>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-xs-8">
            <button class="btn btn-default" id="realTime">实时统计</button>
            <button class="btn btn-default" id="day">当天统计</button>
            <button class="btn btn-default" id="week">本周统计</button>
        </div>
        <div class="col-xs-2 select-second">
            <div class="input-group">
                <input type="text" class="form-control current-second">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            秒
                            <span class="caret"></span>
                        </button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">1</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /input-group -->
        </div>
    </div>
    <div id="container" style="min-width:400px;height:400px"></div>
    <input type='hidden' id='second' value='3'>
</div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="${contextPath}/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="${contextPath}/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="${contextPath}/js/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="${contextPath}/js/sb-admin-2.min.js"></script>
<script src="${contextPath}/js/highcharts.js"></script>

<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
    $(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            },
            lang: {
                shortMonths: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                resetZoom:"恢复缩放",
                weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
            }
        });

        $('.select-second .dropdown-menu>li>a').on('click', function() {
        	var val = $(this).text();
            $('.current-second').val(val);
            $('#second').val(val);
            realTime();
        });
        
        //改变input判断整数
        $('.current-second').change(function() {
            var str = $('.current-second').val();
            var reg = /^\+?[1-9][0-9]*$/;
            if (!reg.test(str)) {
                notice('请输入正整数');
                return false;
            }
            $('#second').val(str);
            realTime();
        });
        
        realTime();

        //实时统计
        $("#realTime").click(function(){
            realTime();
        });

        //当天统计
        $("#day").click(function(){
            var chart = new Highcharts.Chart('container', {
                chart: {
                    zoomType: 'x',
                    panning: true,
                    panKey: 'shift'
                },
                title: {
                    text: '金额统计',
                },
                credits:{
                    enabled:false
                },
                xAxis: {
                    categories: ['10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点', '1点', '2点']
                },
                yAxis: {
                    title: {
                        text: '金额 (元)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '元'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: 
                [
                	{
	                    name: '数字定位玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> list1 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> map1=list1.get(0);
        					%>
        					<%=map1.get("digitalPositioning")%>
	                }, 
	                {
	                    name: '大小单双',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> list2 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> map2=list2.get(0);
        					%>
        					<%=map2.get("sizeDanShuang")%>
	                }, 
	                {
	                    name: '数字组合玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> list3 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> map3=list3.get(0);
        					%>
        					<%=map3.get("digitalPositioning")%>
	                },
	                {
	                    name: '数字玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> list4 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> map4=list4.get(0);
        					%>
        					<%=map4.get("number")%>
	                },
	                {
	                    name: '数字组合玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> list5 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> map5=list5.get(0);
        					%>
        					<%=map5.get("digitalCombination")%>
	                },
	                {
	                    name: '总额',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> list6 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> map6=list6.get(0);
        					%>
        					<%=map6.get("total")%>
	                }
	            ]
            });
            
        });

        //本周统计
        $("#week").click(function(){
            var chart = new Highcharts.Chart('container', {
                chart: {
                    zoomType: 'xy',
                    panning: true,
                    panKey: 'shift'
                },
                title: {
                    text: '金额统计',
                },
                credits:{
                    enabled:false
                },
                xAxis: {
                    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    title: {
                        text: '金额 (元)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '元'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: 
               	[
               		{
	                    name: '数字定位玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> listw1 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> mapw1=listw1.get(1);
        					%>
        					<%=mapw1.get("digitalPositioning")%>
	                }, 
	                {
	                    name: '大小单双',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> listw2 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> mapw2=listw2.get(1);
        					%>
        					<%=mapw2.get("sizeDanShuang")%>
	                }, 
	                {
	                    name: '数字组合玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> listw3 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> mapw3=listw3.get(1);
        					%>
        					<%=mapw3.get("digitalPositioning")%>
	                },
	                {
	                    name: '数字玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> listw4 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> mapw4=listw4.get(1);
        					%>
        					<%=mapw4.get("number")%>
	                },
	                {
	                    name: '数字组合玩法',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> listw5 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> mapw5=listw5.get(1);
        					%>
        					<%=mapw5.get("digitalCombination")%>
	                },
	                {
	                    name: '总额',
	                    data: 
                    		<%
                    		List<Map<String, List<Double>>> listw6 =(List<Map<String, List<Double>>>)request.getAttribute("resultDtoDay");
                    		Map<String, List<Double>> mapw6=listw6.get(1);
        					%>
        					<%=mapw6.get("total")%>
	                }
                ]
            });
        });

        function realTime(){
            var chart = new Highcharts.Chart('container', {
                chart: {
                    type: 'spline',
                    zoomType: 'xy',
                    panning: true,
                    panKey: 'shift',
                    events: {
                        load: requestData // 图表加载完毕后执行的回调函数
                    }
                },

                title: {
                    text: '金额统计',
                },
                credits:{
                    enabled:false
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 300,
                },
                yAxis: {
                    title: {
                        text: '金额 (元)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '元',
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: 
                [
	                {
	                    name: '数字定位玩法',
	                    data: 
	                    	[
	                    		{
	                    			<%
	                    			List<Map<String,String>> listc1 =(List<Map<String,String>>)request.getAttribute("list2");
	                    			for(int index=0;index<listc1.size();index++){
	                    				if(listc1.get(index).get("pm").equals("数字定位玩法")){
	                    					String s="x:"+listc1.get(index).get("date")+","+"y:"+listc1.get(index).get("money");
	                    			%>
	                    					<%=s%>
	            					<%
	                    				}
	                    			}
	            					%>
	            					
	            					
	                    		}
	                    	]
	                }, 
	                {
	                    name: '大小单双玩法',
	                    data: 
	                    	[
	                    		{
	                    			<%
	                    			List<Map<String,String>> listc2 =(List<Map<String,String>>)request.getAttribute("list2");
	                    			for(int index=0;index<listc2.size();index++){
	                    				if(listc2.get(index).get("pm").equals("大小单双玩法")){
	                    					String s="x:"+listc2.get(index).get("date")+","+"y:"+listc2.get(index).get("money");
	                    			%>
	                    					<%=s%>
	            					<%
	                    				}
	                    			}
	            					%>
	                    		}
	                    	]
	                },
	                {
	                    name: '数字组合玩法',
	                    data: 
	                    	[
	                    		{
	                    			<%
	                    			List<Map<String,String>> listc3 =(List<Map<String,String>>)request.getAttribute("list2");
	                    			for(int index=0;index<listc3.size();index++){
	                    				if(listc3.get(index).get("pm").equals("数字组合玩法")){
	                    					String s="x:"+listc3.get(index).get("date")+","+"y:"+listc3.get(index).get("money");
	                    			%>
	                    					<%=s%>
	            					<%
	                    				}
	                    			}
	            					%>
	                    		}
	                    	]
	                },
	                {
	                    name: '数字玩法',
	                    data: 
	                    	[
	                    		{
	                    			<%
	                    			List<Map<String,String>> listc4 =(List<Map<String,String>>)request.getAttribute("list2");
	                    			for(int index=0;index<listc4.size();index++){
	                    				if(listc4.get(index).get("pm").equals("数字玩法")){
	                    					String s="x:"+listc4.get(index).get("date")+","+"y:"+listc4.get(index).get("money");
	                    			%>
	                    					<%=s%>
	            					<%
	                    				}
	                    			}
	            					%>
	                    		}
	                    	]    
					},
	                {
	                    name: '猜合',
	                    data: 
	                    	[
	                    		{
	                    			<%
	                    			List<Map<String,String>> listc5 =(List<Map<String,String>>)request.getAttribute("list2");
	                    			for(int index=0;index<listc5.size();index++){
	                    				if(listc5.get(index).get("pm").equals("猜合")){
	                    					String s="x:"+listc5.get(index).get("date")+","+"y:"+listc5.get(index).get("money");
	                    			%>
	                    					<%=s%>
	            					<%
	                    				}
	                    			}
	            					%>
	                    		}
	                    	]    
					},
	                {
	                    name: '总额',
	                    data: 
	                    	[
	                    		{
	                    			<%
	                    			List<Map<String,String>> listc6 =(List<Map<String,String>>)request.getAttribute("list2");
	                    			for(int index=0;index<listc6.size();index++){
	                    				if(listc6.get(index).get("pm").equals("总额")){
	                    					String s="x:"+listc6.get(index).get("date")+","+"y:"+listc6.get(index).get("money");
	                    			%>
	                    					<%=s%>
	            					<%
	                    				}
	                    			}
	            					%>
	                    		}
	                    	]
					
					}
                ]
            });
            function requestData() {
                $.ajax({
                    url: '${contextPath}/WebManager/statistics/statisticalAgent',
                    success: function(point) {
                    	//console.log(point);
                    	var series0 = chart.series[0];
        				shift0 = series0.data.length > 5; // 当数据点数量超过 10 个，则指定删除第一个点
        				
        				var series1 = chart.series[1];
        				shift1 = series1.data.length > 5; 
        				
        				var series2= chart.series[2];
        				shift2 = series2.data.length > 5;
        				
        				var series3= chart.series[3];
        				shift3 = series3.data.length > 5;
        				
        				var series4= chart.series[4];
        				shift4 = series4.data.length > 5;
        				
        				var series5= chart.series[5];
        				shift5 = series5.data.length > 5;
        				
                        chart.series[0].addPoint(point[0], true, shift0);
                        chart.series[1].addPoint(point[1], true, shift1);
                        chart.series[2].addPoint(point[2], true, shift2);
                        chart.series[3].addPoint(point[3], true, shift3);
                        chart.series[4].addPoint(point[4], true, shift4);
                        chart.series[5].addPoint(point[5], true, shift5);
                        
                        for(var n = 0; n <= 5; n++){
                            if(chart.series[n].data.length > 5){
                                for(var i = 0; i <= chart.series[n].data.length - 5; i++){
                                    chart.series[n].removePoint(i);
                                }
                            }
                        }
                        
                        // 一秒后继续调用本函数
                        var sec = '';
                		sec = $('#second').val() * 1000;
                		//console.log(sec);
                        setTimeout(requestData, sec);
                    },
                    cache: false
                });
            }
        }
        
      //提示信息封装函数
        function notice(notice) {
            var str = '';
            str += '<div class="popupTip">';
            str += notice;
            str += '<span class="glyphicon glyphicon-remove"></span>';
            str += '</div>';
            str += '</strong></div>';
            //wrapper插入str
            $("#wrapper").append(str);
        }

        //取消提示框
        $("#wrapper").on('click', '.glyphicon-remove', function() {
            $(".popupTip").hide();
        });
    });

</script>

</body>

</html>
